import React from "react";
import logo from "./logo.svg";
import { Counter } from "./features/counter/Counter";
import "./App.css";
// import ChartX6Layout from "./features/x6";
// import ChartG6Layout from "./features/g6";
import { SaveModelFormContext, useSaveModelFormContext } from "modelForm/SaveModelFormContext";
import { SaveModelForm } from "modelForm/SaveModelForm";
import { AlyHeader } from "modelForm/AlyHeader";

function App() {
  const flag = 0;

  const saveModelFormValue = useSaveModelFormContext();
  console.log('provider: ', saveModelFormValue.visible);

  // if (flag) {
  //   return (
  //     <>
  //       <ChartG6Layout />
  //       <ChartX6Layout />
  //     </>
  //   );
  // }

  return (
    <SaveModelFormContext.Provider value={saveModelFormValue}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <AlyHeader />
          <Counter />
          <SaveModelForm></SaveModelForm>

          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <span>
            <span>Learn </span>
            <a className="App-link" href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">
              React
            </a>
            <span>, </span>
            <a className="App-link" href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
              Redux
            </a>
            <span>, </span>
            <a className="App-link" href="https://redux-toolkit.js.org/" target="_blank" rel="noopener noreferrer">
              Redux Toolkit
            </a>
            ,<span> and </span>
            <a className="App-link" href="https://react-redux.js.org/" target="_blank" rel="noopener noreferrer">
              React Redux
            </a>
          </span>
        </header>
      </div>
    </SaveModelFormContext.Provider>
  );
}

export default App;
